<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">股票代码</label>
        <el-input v-model="query.code" clearable placeholder="股票代码" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">股票名称</label>
        <el-input v-model="query.name" clearable placeholder="股票名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">交易日期</label>
        <el-date-picker v-model="query.tradingDate" type="date" value-format="yyyy-MM-dd" class="date-item" />
        <label class="el-form-item-label">涨跌幅</label>
        <el-input v-model="query.changeRate" clearable placeholder="涨跌大于查询" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="自增主键">
            <el-input v-model="form.id" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="股票代码" prop="code">
            <el-input v-model="form.code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="股票名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="交易日期" prop="tradingDate">
            <el-input v-model="form.tradingDate" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="开盘价格（单位：元）">
            <el-input v-model="form.openingPrice" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="收盘价格（单位：元）">
            <el-input v-model="form.closingPrice" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="当天最高价格（单位：元）">
            <el-input v-model="form.peakPrice" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="当天最底价格（单位：元）">
            <el-input v-model="form.bottomPrice" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="涨跌幅%" prop="changeRate">
            <el-input v-model="form.changeRate" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="涨跌额（单位：元）">
            <el-input v-model="form.changeAmount" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="成交量（单位：手）">
            <el-input v-model="form.tradingVolume" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="成交额（单位：元）">
            <el-input v-model="form.tradingAmount" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="振幅%">
            <el-input v-model="form.amplitudeRate" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="换手率%">
            <el-input v-model="form.turnoverRate" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="gmtCreate">
            <el-input v-model="form.gmtCreate" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="gmtModified">
            <el-input v-model="form.gmtModified" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>

      <!-- 模态框背景遮罩层 -->
      <div v-if="showModal" class="modal-overlay" @click="hideModal" />

      <!-- 模态框内容 -->
      <div v-if="showModal" ref="chart" class="modal">
        <kline-chart :chart-data="klineChartParams" :theme="theme" />
      </div>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" :cell-style="cellStyle" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="股票代码" />
        <el-table-column prop="name" label="股票名称" width="100">
          <template slot-scope="scope">
            <div style="color: red; text-decoration: underline;" @click="handleClick(scope.row)">
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tradingDate" label="交易日期" />
        <el-table-column prop="openingPrice" label="开盘价(元)" />
        <el-table-column prop="closingPrice" label="收盘价(元)" />
        <el-table-column prop="peakPrice" label="最高价(元)" />
        <el-table-column prop="bottomPrice" label="最低价(元)" />
        <el-table-column prop="changeRate" label="涨跌幅%" />
        <el-table-column prop="changeAmount" label="涨跌额(元)" />
        <el-table-column prop="tradingVolume" label="成交量(手)" />
        <el-table-column prop="tradingAmount" label="成交额(元)" />
        <el-table-column prop="amplitudeRate" label="振幅%" />
        <el-table-column prop="turnoverRate" label="换手率%" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>

  </div>
</template>

<script>
import crudTblKline from '@/api/tblKline'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import KlineChart from '@/components/Echarts/KlineChart.vue'
import { queryData } from '@/api/data'

const defaultForm = { id: null, code: null, name: null, tradingDate: null, openingPrice: null, closingPrice: null, peakPrice: null, bottomPrice: null, changeRate: null, changeAmount: null, tradingVolume: null, tradingAmount: null, amplitudeRate: null, turnoverRate: null, gmtCreate: null, gmtModified: null }
const crudData = { code: null, name: null, tradingDate: null }

export default {
  name: 'TblKline',
  components: { pagination, crudOperation, rrOperation, KlineChart },
  mixins: [presenter(), header(), form(defaultForm), crud(crudData)],
  cruds() {
    return CRUD({ title: 'stock', url: 'api/tblKline', query: { }, idField: 'id', sort: 'id,desc', crudMethod: { ...crudTblKline },
      optShow: {
        add: true,
        edit: false,
        del: true,
        reset: true
      }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'tblKline:add'],
        edit: ['admin', 'tblKline:edit'],
        del: ['admin', 'tblKline:del']
      },
      rules: {
        code: [
          { required: true, message: '股票代码不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '股票名称不能为空', trigger: 'blur' }
        ],
        tradingDate: [
          { required: true, message: '交易日期不能为空', trigger: 'blur' }
        ],
        changeRate: [
          { required: true, message: '涨跌幅%不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'code', display_name: '股票代码' },
        { key: 'name', display_name: '股票名称' },
        { key: 'tradingDate', display_name: '交易日期' },
        { key: 'changeRate', display_name: '涨跌幅%' }
      ],
      klineChartParams: {
        name: '', code: ''
      },
      theme: 'dark',
      showModal: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var url = 'api/tblTradingDateRecord/queryLastTradingDateRecord'
      queryData(url, null)
        .then((response) => {
          this.query.tradingDate = response.tradingDate
        })
        .catch((error) => {
          console.log(error)
          this.loading = false
        })
    },
    hideModal() {
      this.showModal = false
    },
    handleClick(row) {
      this.klineChartParams.name = row.name
      this.klineChartParams.code = row.code
      this.showModal = true
    },
    cellStyle({ row, column, rowIndex }) {
      if (row.changeRate > 0) {
        if (column.label === '涨跌幅%') {
          return { color: 'red' }
        }
      } else {
        if (column.label === '涨跌幅%') {
          return { color: 'green' }
        }
      }
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
    }
  }
}
</script>

<style scoped>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 80% 透明度 */
  z-index: 9998; /* 确保遮罩层在模态框下方 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* 让遮罩层可点击 */
}
.modal {
  margin-top: -180px;
  position: relative; /* 相对于遮罩层定位 */
  height: 520px; /* 高度自适应内容 */
  background-color: #fff; /* 白色背景 */
  border-radius: 10px; /* 可选，圆角 */
  z-index: 9999; /* 确保模态框在遮罩层上方 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 可选，阴影效果 */
}
</style>
